<template>
  <div>
    <el-container>
      <el-header class="layout-header">
        {{ store.getters.getCurrentStepTitle }}
      </el-header>
      <el-main>
        <ReportSelector />
      </el-main>
      <el-footer>{{ store.getters.getCurrentStepFooter }}</el-footer>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import ReportSelector from "./components/ReportSelector.vue";
import { Store } from "./store";
const store = useStore<Store>();
</script>
<style lang="css">
.layout-header {
  text-align: center;
}
.el-header {
  background-color: #fc99aa;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fc99aa;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  margin: 0;
}
</style>
